<template>
    <div class="menuManagement">
        <navigation-bar>
            <div class="searchContent">
                <div class="other" style="display: flex">
                    <label>年：</label>
                    <el-select v-model="year" clearable size="mini" style="width: 120px; margin-right: 10px">
                        <el-option :value="item" :label="item" v-for="(item, index) in years" v-bind:key="index"></el-option>
                    </el-select>
                    <label>月：</label>
                    <el-select v-model="month" clearable size="mini" style="width: 120px; margin-right: 10px">
                        <el-option :value="item" :label="item" v-for="(item, index) in months" v-bind:key="index"></el-option>
                    </el-select>
                    <custom-button type="download" style="margin-right: 10px" @downloadClick="exportXls" title="导出"></custom-button>
                </div>
                <div class="btnList">
                    <div :class="getPh(1)" @click="changePh(1)">
                        <svg
                            t="1747928189180"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="5477"
                            width="20"
                            height="20"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                            <path
                                d="M735.268 102.457L250.069 521.042l260.086 82.937-203.108 317.564 519.131-384.429-272.706-80.277"
                                p-id="5478"
                                fill="#666"
                            ></path>
                        </svg>
                        <label>电</label>
                    </div>
                    <div :class="getPh(2)" @click="changePh(2)">
                        <svg
                            t="1747928286572"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="6682"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                        >
                            <path
                                d="M512 981.333333a384 384 0 0 1-384-384c0-142.250667 120.234667-294.997333 356.906667-489.685333L512 85.333333l27.093333 22.314667C775.765333 302.336 896 455.082667 896 597.333333a384 384 0 0 1-384 384z m-298.666667-384a298.666667 298.666667 0 0 0 597.333334 0c0-104.490667-98.432-231.68-298.666667-401.194666C311.765333 365.696 213.333333 492.842667 213.333333 597.333333z"
                                fill="#666"
                                p-id="6683"
                            ></path>
                        </svg>

                        <label>水</label>
                    </div>
                    <div :class="getPh(3)" @click="changePh(3)">
                        <svg
                            t="1747928320728"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="7751"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                        >
                            <path
                                d="M912.304593 545.311687c-3.290953-44.903699-11.742439-89.558735-24.488741-129.192408-19.523659-60.776202-48.670489-118.789477-82.055854-163.444513-9.149381-12.1886-26.776853-14.978133-39.467897-6.219655-12.69002 8.702196-15.591093 25.631774-6.497994 37.820374 29.92659 39.996946 56.17337 92.487438 73.996295 147.824767 11.463076 35.701107 19.105127 76.143191 22.090111 117.004831 10.876722 148.856259-52.966329 270.463921-176.413895 339.438852-20.222577-159.511947-149.163251-211.556277-155.104567-213.899648-7.92039-3.067872-16.902972-2.565429-24.3772 1.451048-112.26283 59.799968-144.952346 160.123884-154.434302 216.270649-111.091144-56.06183-178.61605-161.603585-178.61605-283.265482 0-81.945337 42.533722-157.866471 130.030495-232.05617 11.629875-9.873882 23.483854-19.579941 35.337833-29.287023 64.261583-52.603055 130.754996-106.963127 164.251901-189.716876 3.654226-8.925277 6.834662-17.014512 9.511631-24.321942 59.185984 39.940664 187.290617 147.769508 228.876758 354.054735 2.956332 14.7264 17.850553 24.320918 33.108049 21.476127 15.33936-2.817162 25.38004-17.042141 22.397103-31.740912C732.991672 192.401008 526.482341 79.831186 502.998487 67.838038c-0.781806-0.447185-1.616824-0.809435-2.454912-1.226944-14.000875-6.387477-30.735002-0.809435-37.597293 12.522198-1.923816 3.765767-2.843768 7.782244-2.901073 11.770068-2.648316 10.014074-13.665231 40.97318-16.176424 47.472198-28.366048 70.035076-86.631056 117.674073-148.299581 168.129208-12.105712 9.901511-24.180725 19.830651-36.09201 29.899984C160.547021 420.330184 110.397854 512.065492 110.397854 609.100502c0 156.583245 95.472422 290.349831 249.154593 349.033371 3.347235 1.283226 6.888897 1.89721 10.402931 1.89721 5.635347 0 11.212366-1.590218 16.009625-4.742001 7.782244-5.076622 12.412704-13.583366 12.328793-22.593578-0.027629-5.52176 0.418532-131.645273 116.503411-202.044646 30.652114 16.902972 110.786199 73.216535 110.786199 201.042829 0 9.231245 4.880147 17.84953 12.94073 22.814612 8.087189 4.993734 18.240433 5.744841 26.997887 1.896186C833.512063 883.356796 925.77642 729.648019 912.304593 545.311687M471.703737 113.022123c-1.226944-0.837064-2.343371-1.757017-3.319605-2.733251C469.417671 111.292736 470.505445 112.213711 471.703737 113.022123"
                                p-id="7752"
                                fill="#666"
                            ></path>
                        </svg>
                        <label>气</label>
                    </div>
                    <div :class="getPh(4)" @click="changePh(4)">
                        <svg
                            t="1747928368530"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="8969"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                        >
                            <path
                                d="M512 754.036364c-132.654545 0-242.036364-109.381818-242.036364-242.036364S379.345455 269.963636 512 269.963636 754.036364 379.345455 754.036364 512 644.654545 754.036364 512 754.036364z m0-430.545455c-104.727273 0-188.509091 83.781818-188.509091 188.509091s83.781818 188.509091 188.509091 188.509091 188.509091-83.781818 188.509091-188.509091-83.781818-188.509091-188.509091-188.509091zM512 216.436364c-13.963636 0-27.927273-11.636364-27.927273-27.927273V27.927273c0-16.290909 13.963636-27.927273 27.927273-27.927273s27.927273 11.636364 27.927273 27.927273v160.581818c0 13.963636-13.963636 27.927273-27.927273 27.927273zM512 1024c-13.963636 0-27.927273-11.636364-27.927273-27.927273v-160.581818c0-13.963636 11.636364-27.927273 27.927273-27.927273 13.963636 0 27.927273 11.636364 27.927273 27.927273v160.581818c0 16.290909-13.963636 27.927273-27.927273 27.927273zM188.509091 539.927273H27.927273C11.636364 539.927273 0 525.963636 0 512s11.636364-27.927273 27.927273-27.927273h160.581818c13.963636 0 27.927273 11.636364 27.927273 27.927273 0 13.963636-13.963636 27.927273-27.927273 27.927273zM996.072727 539.927273h-160.581818c-13.963636 0-27.927273-11.636364-27.927273-27.927273 0-13.963636 11.636364-27.927273 27.927273-27.927273h160.581818c13.963636 0 27.927273 11.636364 27.927273 27.927273 0 13.963636-11.636364 27.927273-27.927273 27.927273zM242.036364 269.963636c-6.981818 0-13.963636-2.327273-18.618182-6.981818L116.363636 153.6c-11.636364-9.309091-11.636364-27.927273 0-37.236364 11.636364-11.636364 27.927273-11.636364 37.236364 0l107.054545 107.054546c11.636364 11.636364 11.636364 27.927273 0 37.236363-4.654545 6.981818-11.636364 9.309091-18.618181 9.309091zM134.981818 916.945455c-6.981818 0-13.963636-2.327273-18.618182-6.981819-11.636364-11.636364-11.636364-27.927273 0-37.236363l107.054546-107.054546c11.636364-11.636364 27.927273-11.636364 37.236363 0 11.636364 11.636364 11.636364 27.927273 0 37.236364L153.6 907.636364c-4.654545 6.981818-11.636364 9.309091-18.618182 9.309091zM889.018182 916.945455c-6.981818 0-13.963636-2.327273-18.618182-6.981819l-107.054545-107.054545c-11.636364-11.636364-11.636364-27.927273 0-37.236364 11.636364-11.636364 27.927273-11.636364 37.236363 0l107.054546 107.054546c11.636364 11.636364 11.636364 27.927273 0 37.236363-4.654545 4.654545-11.636364 6.981818-18.618182 6.981819zM781.963636 269.963636c-6.981818 0-13.963636-2.327273-18.618181-6.981818-11.636364-11.636364-11.636364-27.927273 0-37.236363L870.4 116.363636c11.636364-11.636364 27.927273-11.636364 37.236364 0 11.636364 11.636364 11.636364 27.927273 0 37.236364l-107.054546 107.054545c-4.654545 6.981818-11.636364 9.309091-18.618182 9.309091z"
                                p-id="8970"
                                fill="#666"
                            ></path>
                        </svg>
                        <label>热</label>
                    </div>
                </div>
            </div>
        </navigation-bar>

        <el-table
            height="calc(100vh - 160px)"
            :data="tableData"
            style="width: 100%; margin: 10px 0"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column prop="name" label="部门" width="200"> </el-table-column>
            <el-table-column prop="yzbz" label="月指标值"> </el-table-column>
            <el-table-column prop="ysyz" label="月使用值"> </el-table-column>
            <el-table-column prop="ysyz1" label="月剩余值"> </el-table-column>
        </el-table>

        <div v-if="dialogShow">
            <custom-dialog title="指标引入" size="small" @dialogClose="dialogClose">
                <yinru @close="dialogClose"></yinru>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import navigationBar from '@/components/customComponents/managementCenter/navigationBar'
import customButton from '@/components/customComponents/customForm/customButton'
// import {Utility} from "@/libs/utility"
import yinru from './components/yinru'
import customDialog from '@/components/customComponents/customDialog'
import {updateFileList} from '@/mockData/systemManage.js'
export default {
    name: 'menuManagement',
    components: {navigationBar, customButton, yinru, customDialog},
    data() {
        return {
            dialogShow: false,
            menuName: '',
            tableData: [],
            phIndex: 2,
            years: [],
            year: '2015',
            month: '1',
            months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }
    },
    computed: {},
    created() {
        var years = []
        for (let index = 2014; index < 2040; index++) {
            years.push(index)
        }
        this.years = years
        this.getAllMenu()
    },
    methods: {
        dialogClose() {
            this.dialogShow = false
        },
        yinru() {
            this.dialogShow = true
        },
        // 分页点击事件
        pageChange(p) {
            console.log(p)
            // this.pageNo = p
            // this.initPage()
        },
        exportXls() {
            // let title = "出组期问诊配置"
            // AjaxCommonExcelDownload("/ccdc/cfg/expOutInquiry/exportXls?title=" + title).then(
            //     (response) => {
            //         const blob = new Blob([response.data], {
            //             type: "application/vnd.ms-excel"
            //         })
            //         const link = document.createElement("a")
            //         link.href = window.URL.createObjectURL(blob)
            //         link.download = title + ".xls"
            //         link.click()
            //     },
            //     (error) => {
            //         console.log(error.message)
            //     }
            // )
        },
        changePh(index) {
            this.phIndex = index
        },
        getPh(index) {
            return this.phIndex == index ? 'btnItem hover' : 'btnItem'
        },
        getAllMenu() {
            this.tableData = updateFileList
        }
    }
}
</script>

<style lang="scss" scoped>
.menuManagement {
    .other {
        float: right;
        display: inline-block;
    }
    .btnList {
        text-align: center;
        display: inline-block;
        margin-right: 10px;
        margin-top: 1px;
        float: right;
        .hover {
            border-color: #2680fa !important;
        }
        .btnItem {
            display: inline-block;
            height: 26px;
            width: 60px;
            margin-left: 10px;
            line-height: 26px;
            text-align: left;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                border-color: #2680fa;
            }
            &:first-child {
                margin-left: 0 !important;
            }
            svg {
                margin-top: 2px;
                float: left;
                margin-left: 8px;
                margin-right: 3px;
            }
            label {
                font-size: 14px;
            }
        }
    }
}
</style>
